<!doctype html>
<html lang="zh-cn">
<head>

    <meta charset="utf-8">
    <meta name="generator" content="Hugo 0.57.2" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>QuickApp | The Sky of OtsWang</title>
    <meta property="og:title" content="QuickApp - The Sky of OtsWang">
    <meta property="og:type" content="article">
        
    <meta property="article:published_time" content="2018-11-14T14:07:57&#43;08:00">
        
        
    <meta property="article:modified_time" content="2018-11-14T14:07:57&#43;08:00">
        
    <meta name="Keywords" content="golang,go语言,otswang,java,博客,python">
    <meta name="description" content="快应用官方开发文档学习">
        
    <meta name="author" content="OtsWang">
    <meta property="og:url" content="https://otswang.gitee.io/hugo/post/webapp/quick_app/">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

    <link rel="stylesheet" href="/hugo/css/normalize.css">
    
        <link rel="stylesheet" href="/hugo/css/prism.css">
    
    <link rel="stylesheet" href="/hugo/css/style.css">
    <script type="text/javascript" src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

    


    
    
</head>

<body>
<header id="header" class="clearfix">
    <div class="container">
        <div class="col-group">
            <div class="site-name ">
                
                    <a id="logo" href="https://otswang.gitee.io/hugo/">
                        The Sky of OtsWang
                    </a>
                
                <p class="description">擅长写HelloWorld的小小码农</p>
            </div>
            <div>
                <nav id="nav-menu" class="clearfix">
                    
                    
                    <a  href="https://otswang.gitee.io/hugo/" title="Home">Home</a>
                    
                    <a  href="https://otswang.gitee.io/hugo/tags/" title="Tags">Tags</a>
                    
                    <a  href="https://otswang.gitee.io/hugo/categories/" title="Categories">Categories</a>
                    
                    <a  href="https://otswang.gitee.io/hugo/archives/" title="Archives">Archives</a>
                    
                    <a  href="https://otswang.gitee.io/hugo/about/" title="About">About</a>
                    
                </nav>
            </div>
        </div>
    </div>
</header>


<div id="body">
    <div class="container">
        <div class="col-group">

            <div class="col-8" id="main">
                <div class="res-cons">
                    <article class="post">
                        <header>
                            <h1 class="post-title">QuickApp</h1>
                        </header>
                        <date class="post-meta meta-date">
                            2018年11月14日
                        </date>
                        
                        <div class="post-meta">
                            <span>|</span>
                            
                                <span class="meta-category"><a href="https://otswang.gitee.io/hugo/categories/smallquickappweb">SmallQuickAppWeb</a></span>
                            
                        </div>
                        
                        
                        
                        <div class="post-content">
                            <p>快应用官方开发文档学习。</p>

<h1 id="页面生命周期">页面生命周期</h1>

<ul>
<li>页面的生命周期： onInit, onReady, onShow, onHide, onDestroy, onBackPress, onMenuPress</li>
<li>页面的状态： 显示，隐藏，销毁</li>
<li>APP的生命周期： onCreate, onDestroy</li>
</ul>

<h2 id="页面的生命周期">页面的生命周期</h2>

<p>页面通过viewModel渲染，页面的生命周期也与viewModel的生命周期一致。</p>

<h2 id="页面的状态">页面的状态</h2>

<ul>
<li>显示/隐藏 可以用页面的<code>$visible</code>属性进行判断；</li>
<li>销毁 用<code>$valid</code>属性进行判断
<br /></li>
</ul>

<h2 id="app的状态">APP的状态</h2>

<p>当前为APP的生命周期提供了两个回调函数：<code>onCreate</code>,<code>onDestroy</code>，在<code>app.ux</code>中定义回调函数。</p>

<h2 id="app与-app-def">$app与$app.$def</h2>

<p>前者表示框架为开发者暴露出来的APP对象，后者表示开发者在app.ux中导出的对象，放置业务相关的全局数据和方法。</p>

<h1 id="页面样式与布局">页面样式与布局</h1>

<p>主要内容：</p>

<ul>
<li>盒模型</li>
<li>长度单位</li>
<li>设置样式</li>
<li>flex布局</li>
<li>动态修改样式</li>
<li>引入less预编译</li>
</ul>

<h2 id="盒模型">盒模型</h2>

<p>使用border-box模型，暂不支持content-box模型和box-sizing模型。
长度单位：设计稿1px / 设计稿基准宽度 = 框架样式1px / 项目配置基准宽度。</p>

<h2 id="设置样式">设置样式</h2>

<p>可以使用<code>内联样式</code>,<code>tag选择器</code>,<code>class选择器</code>,<code>id选择器</code>等为组件设置样式。
同时也可以选择使用<code>并列选择</code>和<code>后代选择器</code>设置样式。</p>

<h2 id="flex布局示例">flex布局示例</h2>

<p>div组件为最常用的flex容器组件，具有flex布局的特性，text,a,plan, label组件为文本容器组件，其他组件不能直接放置文本内容。</p>

<h2 id="动态修改样式">动态修改样式</h2>

<ul>
<li>修改class： 更新组件的class属性中使用的变量的值</li>
<li>修改内联style： 更新组件的style属性中的某个CSS的值</li>
</ul>

<h2 id="引入less预编译">引入less预编译</h2>

<p>使用Less.js进行编译。</p>

<h1 id="框架指令">框架指令</h1>

<p>主要介绍了框架提供的指令与组件:
- 指令for
- 指令if与指令show
- 组件block
- 组件slot</p>

<h2 id="指令for">指令for</h2>

<pre><code class="language-html">&lt;template&gt;
&lt;div class=&quot;tutorial-page&quot;&gt;
    &lt;div class=&quot;tutorial-row&quot; for=&quot;{{list}}&quot;&gt;
        &lt;text&gt;{{$idx}}.{{$item.name}}&lt;/text&gt;
    &lt;/div&gt;
    &lt;div class=&quot;tutorial-row&quot; for=&quot;value in list &quot;&gt;
        &lt;text&gt;{{$idx}}.{{value.name}}&lt;/text&gt;
    &lt;/div&gt;
    &lt;div class=&quot;tutorial-row&quot; for=&quot;(personIndex, personItem) in list&quot;&gt;
        &lt;text&gt;{{personIndex}}.{{personItem.name}}&lt;/text&gt;
    &lt;/div&gt;
    &lt;!-- if指令 --&gt;
    &lt;div class=&quot;if-test&quot;&gt;
        &lt;text onclick=&quot;onClickedCondition&quot;&gt;条件指令&lt;/text&gt;
        &lt;text if=&quot;{{conditionVar === 1}}&quot;&gt;if == 1&lt;/text&gt;
        &lt;text if=&quot;{{conditionVar === 2}}&quot;&gt;elif == 2&lt;/text&gt;
        &lt;text else&gt;else&lt;/text&gt;
    &lt;/div&gt;
    &lt;!-- show指令 --&gt;
    &lt;div class=&quot;show-test&quot;&gt;
        &lt;text onclick=&quot;onClickShow&quot;&gt;显示隐藏&lt;/text&gt;
        &lt;text show=&quot;{{showVar}}&quot;&gt;show与否&lt;/text&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;

&lt;style lang=&quot;less&quot;&gt;
    .tutorial-page {
        flex-direction: column;
        .tutorial-row{
            width: 85%;
            margion-top: 10px;
            margion-bottom: 10px;
        }
    }
&lt;/style&gt;

&lt;script&gt;
    export default {
        private: {
            showVar: true,
            conditionVar: 1,
            list: [
                {name: 'aa},
                {name: 'bb}
            ]
        },

        onInit () {
            this.$page.setTitleBar({
                text: '指令for'
            })
        },
        onClickShow () {
            this.showVar = !this.showVar;
        },
        onClickCondition () {
            this.conditionVar = ++this.conditionVar % 3;
        }
    }
&lt;/script&gt;
</code></pre>

<h2 id="指令if与指令show">指令if与指令show</h2>

<p>if条件指令包括<code>if/elif/else</code>这3个相关指令，用于控制是否增加或者删除组件；
show指令只是用于控制组件的显示状态。</p>

<p>注意，<code>if/elif/else</code>节点必须是相邻的兄弟节点。</p>

<h2 id="组件block">组件block</h2>

<p>block组件是表达逻辑区块的组件，没有对应的Native组件，可以使用<block>实现更为灵活的列表/条件渲染。</p>

<h2 id="组件slot">组件slot</h2>

<p>slot节点用于向开发者额外开发的自定义ux组件中插入内容；
通常自定义组件的模板中提供slot组件，当该组件被引入到页面组件中后，开发者可以灵活定义该自定义组件内部的子内容。</p>

<h1 id="页面切换与参数传递">页面切换与参数传递</h1>

<p>主要介绍如何打开页面、回退并传递参数</p>

<h2 id="通过组件-a-进行切换和传递参数">通过组件<code>&lt;a&gt;</code>进行切换和传递参数</h2>

<pre><code class="language-html">&lt;template&gt;
    &lt;div class=&quot;tutorial-page&quot; &gt;
        &lt;a href=&quot;tel:10086&quot;&gt;调其电话&lt;/a&gt;
        &lt;a href=&quot;sms:10086&quot;&gt;调其短信&lt;/a&gt;
        &lt;a href=&quot;mailto:example@xx.com&quot;&gt;调其邮件&lt;/a&gt;
        &lt;a href=&quot;https://www.baidu.com/&quot;&gt;打开页面&lt;/a&gt;
    &lt;/div&gt;
&lt;/template&gt;
</code></pre>

<p>通过调用<code>?key=value</code>进行参数传递。</p>

<h2 id="通过接口router切换页面和传递参数">通过接口router切换页面和传递参数</h2>

<pre><code class="language-html">&lt;template&gt;
    &lt;div class=&quot;tutorial-page&quot;&gt;
        &lt;input class=&quot;btn&quot; type=&quot;button&quot; value=&quot;跳转&quot; onclick=&quot;routerPagePush&quot;&gt;&lt;/input&gt;
        &lt;input class=&quot;btn&quot; type=&quot;button&quot; value=&quot;跳转无返回&quot; onclick=&quot;routerPageReplace&quot;&gt;&lt;/input&gt;
        &lt;input class=&quot;btn&quot; type=&quot;button&quot; value=&quot;上一页&quot; onclick=&quot;routerPageBack&quot;&gt;&lt;/input&gt;
        &lt;input class=&quot;btn&quot; type=&quot;button&quot; value=&quot;清空页面记录&quot; onclick=&quot;routerPageClear&quot; &gt;&lt;/input&gt;
    &lt;/div&gt;
&lt;/template&gt;

&lt;style&gt;
    .tutorial-page {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .btn {
        width: 550px;
        height: 86px;
        margin-top: 75px;
        border-radius: 43px;
        background-color: #09ba07;
        font-size: 30px;
    }
&lt;/style&gt;    

&lt;script&gt;
    import router from '@system.router'
    // 导入模块

    export default {
        private: {
            title: 'hello, world'
        },
        onInit() {
            this.$page.setTitleBar({
                text: '接口router切换页面',
                params:{
                    key: this.title
                }
            })
        }

        routerPagePush () {
            router.push({
                uri: '/PageParams/receiveparams'
            });
        },

        routerPageReplace () {
            router.replace({
                uri: '/PageParams/receiveparams'
            });
        },

        routerPageBack () {
            router.back();
        },

        routerPageClear (){
            router.clear();
        }
    }
&lt;/script&gt;
</code></pre>

<h2 id="参数接收">参数接收</h2>

<p>参数的接收在组件<code>&lt;a&gt;</code>和<code>router</code>中方法一致： 在页面的<code>viewModel</code>的<code>protected</code>中声明使用的属性。
注意：
- protected内定义的属性，允许被应用内页面请求传递的数据覆盖，不允许外部请求传递的数据覆盖。
- 若需要被外部请求传递的数据覆盖，则应该在viewmodel的public属性中声明使用的属性。</p>

<h2 id="回传参数">回传参数</h2>

<p>在页面之间回传参数，比如：
存在页面A和页面B，先从A跳转到B，再从B返回到页面A，需要传递参数，这时，组件a和router传参就不再适合，可以使用APP级别的对象：<code>this.$app.$data</code>。</p>

<p>示例，A页面：</p>

<pre><code class="language-html">&lt;template&gt;
  &lt;div class=&quot;tutorial-page&quot;&gt;
    &lt;a href=&quot;/PageParams/returnParams/pageb&quot;&gt;跳转到页面B&lt;/a&gt;
    &lt;text&gt;{{msg}}&lt;/text&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;style&gt;
  .tutorial-page {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  a {
    margin-top: 75px;
    font-size: 30px;
    color: #09ba07;
    text-decoration: underline;
  }
&lt;/style&gt;

&lt;script&gt;
  export default {
    private: {
      msg: ''
    },
    onInit () {
      this.$page.setTitleBar({ text: '页面A' })
    },
    onShow () {
      // 页面被切换显示时，从数据中检查是否有页面B传递来的数据
      if (this.$app.$data.dataPageB &amp;&amp; this.$app.$data.dataPageB.gotoPage === 'pageA') {
        // 从数据中获取回传给本页面的数据
        const data = this.$app.$data.dataPageB.params
        this.msg = data.msg
      }
    }
  }
&lt;/script&gt;
</code></pre>

<p>页面B的实现：</p>

<pre><code class="language-html">&lt;template&gt;
  &lt;div class=&quot;tutorial-page&quot;&gt;
    &lt;text&gt;页面B&lt;/text&gt;
    &lt;input style=&quot;width: 450px;&quot; placeholder=&quot;请输入回传给页面A的信息&quot; onchange=&quot;updateMsg&quot;/&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;style&gt;
  .tutorial-page {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
&lt;/style&gt;

&lt;script&gt;
  export default {
    private: {
      msg: ''
    },
    onInit () {
      this.$page.setTitleBar({ text: '页面B' })
    },
    onHide () {
      // 页面被切换隐藏时，将要传递的数据对象写入
      this.$app.$data.dataPageB = {
        gotoPage: 'pageA',
        params: {
          msg: this.msg
        }
      }
    },
    updateMsg (e) {
      // 更新input输入的信息文本
      this.msg = e.text
    }
  }
&lt;/script&gt;
</code></pre>

<h1 id="事件监听与触发">事件监听与触发</h1>

<p>本节主要介绍了：
- 监听与移除监听事件： $on(), $off()
- 触发viewModel事件： $emit()
- 监听原生组件事件
- 触发原生组件事件 $emitElement()</p>

<p>掌握监听与触发事件能够更好的分离业务逻辑，减少方法响应上的耦合。</p>
                        </div>

                        


                        

<div class="post-archive">
    <h2>See Also</h2>
    <ul class="listing">
        
        <li><a href="/hugo/post/design/general/">泛型</a></li>
        
    </ul>
</div>


                        <div class="post-meta meta-tags">
                            
                            <ul class="clearfix">
                                
                                <li><a href="https://otswang.gitee.io/hugo/tags/%E5%BF%AB%E5%BA%94%E7%94%A8">快应用</a></li>
                                
                                <li><a href="https://otswang.gitee.io/hugo/tags/%E7%BC%96%E7%A8%8B">编程</a></li>
                                
                            </ul>
                            
                        </div>
                    </article>
                    
    

    
    
                </div>
            </div>
            <div id="secondary">

    <section class="widget">
        <form id="search" action="//www.google.com/search" method="get" accept-charset="utf-8" target="_blank" _lpchecked="1">
      
      <input type="text" name="q" maxlength="20" placeholder="Search">
      <input type="hidden" name="sitesearch" value="https://otswang.gitee.io/hugo/">
      <button type="submit" class="submit icon-search"></button>
</form>
    </section>

    

    <section class="widget">
        <h3 class="widget-title">最近文章</h3>
<ul class="widget-list">
    
    <li>
        <a href="https://otswang.gitee.io/hugo/post/middle_tools/kafka/" title="Kafka">Kafka</a>
    </li>
    
    <li>
        <a href="https://otswang.gitee.io/hugo/post/middle_tools/zk_starter/" title="Zookeeper Starter">Zookeeper Starter</a>
    </li>
    
    <li>
        <a href="https://otswang.gitee.io/hugo/post/java/javafx_starter/" title="Java Fx 入门学习">Java Fx 入门学习</a>
    </li>
    
    <li>
        <a href="https://otswang.gitee.io/hugo/post/other/codec/" title="常用加密/签名算法">常用加密/签名算法</a>
    </li>
    
    <li>
        <a href="https://otswang.gitee.io/hugo/post/other/docker/" title="Docker学习">Docker学习</a>
    </li>
    
    <li>
        <a href="https://otswang.gitee.io/hugo/post/webapp/react_starter/" title="React 从入门到入门">React 从入门到入门</a>
    </li>
    
    <li>
        <a href="https://otswang.gitee.io/hugo/post/lang/csharpe_starter/" title="C#语言从入门到入门">C#语言从入门到入门</a>
    </li>
    
    <li>
        <a href="https://otswang.gitee.io/hugo/post/java/java8time/" title="Java checklist">Java checklist</a>
    </li>
    
    <li>
        <a href="https://otswang.gitee.io/hugo/post/other/keyboard/" title="快捷键记录">快捷键记录</a>
    </li>
    
    <li>
        <a href="https://otswang.gitee.io/hugo/post/other/vim/" title="vim 使用记录">vim 使用记录</a>
    </li>
    
</ul>
    </section>

    

    <section class="widget">
        <h3 class="widget-title">分类</h3>
<ul class="widget-list">
    
    <li>
        <a href="https://otswang.gitee.io/hugo/categories/algorithm/">algorithm(4)</a>
    </li>
    
    <li>
        <a href="https://otswang.gitee.io/hugo/categories/design/">design(7)</a>
    </li>
    
    <li>
        <a href="https://otswang.gitee.io/hugo/categories/doc/">doc(2)</a>
    </li>
    
    <li>
        <a href="https://otswang.gitee.io/hugo/categories/go/">go(3)</a>
    </li>
    
    <li>
        <a href="https://otswang.gitee.io/hugo/categories/java/">java(7)</a>
    </li>
    
    <li>
        <a href="https://otswang.gitee.io/hugo/categories/java-java8inaction/">java-java8inaction(11)</a>
    </li>
    
    <li>
        <a href="https://otswang.gitee.io/hugo/categories/java-juc/">java-juc(3)</a>
    </li>
    
    <li>
        <a href="https://otswang.gitee.io/hugo/categories/java-jvm/">java-jvm(2)</a>
    </li>
    
    <li>
        <a href="https://otswang.gitee.io/hugo/categories/java-spring/">java-spring(2)</a>
    </li>
    
    <li>
        <a href="https://otswang.gitee.io/hugo/categories/java-thinkinginjava/">java-thinkinginjava(11)</a>
    </li>
    
    <li>
        <a href="https://otswang.gitee.io/hugo/categories/middletools/">middletools(9)</a>
    </li>
    
    <li>
        <a href="https://otswang.gitee.io/hugo/categories/other/">other(24)</a>
    </li>
    
    <li>
        <a href="https://otswang.gitee.io/hugo/categories/qt/">qt(2)</a>
    </li>
    
    <li>
        <a href="https://otswang.gitee.io/hugo/categories/smallquickappweb/">smallquickappweb(4)</a>
    </li>
    
    <li>
        <a href="https://otswang.gitee.io/hugo/categories/webapp/">webapp(1)</a>
    </li>
    
    <li>
        <a href="https://otswang.gitee.io/hugo/categories/%E5%B0%8F%E4%BC%97%E8%AF%AD%E8%A8%80%E4%B8%80%E7%9E%A5/">小众语言一瞥(4)</a>
    </li>
    
</ul>
    </section>

    <section class="widget">
        <h3 class="widget-title">标签</h3>
<div class="tagcloud">
    
    <a href="https://otswang.gitee.io/hugo/tags/c/">c#</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/checklist/">checklist</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/codec/">codec</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/docker/">docker</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/elk/">elk</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/emmet/">emmet</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/file/">file</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/freemarker/">freemarker</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/git/">git</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/go/">go</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/http/">http</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/interview/">interview</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/java/">java</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/javascript/">javascript</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/juc/">juc</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/jvm/">jvm</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/keyboard/">keyboard</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/linux/">linux</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/lua/">lua</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/manjaro/">manjaro</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/map/">map</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/markdown/">markdown</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/mq/">mq</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/mybatis/">mybatis</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/mycat/">mycat</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/mysql/">mysql</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/nginx/">nginx</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/qt/">qt</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/react/">react</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/redis/">redis</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/rust/">rust</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/spring/">spring</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/springboot/">springboot</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/stream/">stream</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/tcp/">tcp</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/thymeleaf/">thymeleaf</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/tree/">tree</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/uml/">uml</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/vim/">vim</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/vlang/">vlang</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/vue/">vue</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/zookeeper/">zookeeper</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/%E4%BD%8D%E8%BF%90%E7%AE%97/">位运算</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/%E5%8D%8F%E8%AE%AE/">协议</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/%E5%A4%9A%E7%BA%BF%E7%A8%8B/">多线程</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/%E5%B9%B6%E5%8F%91%E9%9B%86%E5%90%88/">并发集合</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/">微信小程序</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/%E5%BF%AB%E5%BA%94%E7%94%A8/">快应用</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/%E6%97%B6%E9%97%B4%E7%B1%BB/">时间类</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8E/">模板引擎</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/%E7%AE%97%E6%B3%95/">算法</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/%E7%BC%96%E7%A8%8B/">编程</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/%E7%BC%96%E7%A8%8B%E8%A7%84%E8%8C%83/">编程规范</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/%E8%AE%BE%E8%AE%A1/">设计</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/">设计模式</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/%E9%99%90%E6%B5%81/">限流</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1/">面向对象</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/%E9%9D%A2%E8%AF%95/">面试</a>
    
</div>
    </section>

    

    <section class="widget">
        <h3 class="widget-title">其它</h3>
        <ul class="widget-list">
            <li><a href="https://otswang.gitee.io/hugo/index.xml">文章 RSS</a></li>
        </ul>
    </section>

    

</div>
        </div>
    </div>
</div>
<footer id="footer">
    <div class="container">
        &copy; 2020 <a href="https://otswang.gitee.io/hugo/">The Sky of OtsWang By OtsWang</a>.
        Powered by <a rel="nofollow noreferer noopener" href="https://gohugo.io" target="_blank">Hugo</a>.
        <a href="https://www.flysnow.org/" target="_blank">Theme</a> based on <a href="https://github.com/Dudiao137/maupassant-hugo" target="_blank">maupassant-ots</a>.
        
    </div>
</footer>


    <script type="text/javascript">
    
    (function(){
        $("pre code").parent().addClass("line-numbers")
    }())

    window.MathJax = {
        tex2jax: {
            inlineMath: [ ['$','$'] ],
            processEscapes: true
        }
    };
    </script>
    <script type="text/javascript" src="/hugo/js/prism.js" async="true"></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML' async></script>

<a id="rocket" href="#top"></a>
<script type="text/javascript" src="/hugo/js/totop.js?v=0.0.0" async=""></script>







 
 <script src="https://mermaidjs.github.io/scripts/mermaid.min.js"></script>
 <script>
       mermaid.initialize({ startOnLoad: true });
 </script>
</body>
</html>
